<template>
  <div>
    <!-- 今日数据变动 -->
    <div class="header">
      <div class="header-left">
        <div class="header-left-top">
          <div class="headerbo">
            <div class="header-do-top"><span>今日数据变动</span></div>
            <div class="border">
              <div class="border-text">
                <div class="border-text1">新增学院</div>
                <div class="border-text2"><span style="color: red;">{{list.addCounts}}</span>人</div>
              </div>
              <div class="border-text">
                <div class="border-text1">带续费会员</div>
                <div class="border-text2"><span style="color: red;">{{list.courseCounts}}</span>人</div>
              </div>
              <div class="border-text">
                <div class="border-text1">今日课节</div>
                <div class="border-text2"><span style="color: red;">{{list.renewCounts}}</span>人</div>
              </div>
              <div class="border-text">
                <div class="border-text1">请假人数</div>
                <div class="border-text2"><span style="color: red;">{{list.studentCounts}}</span>人</div>
              </div>
              <div class="border-text">
                <div class="border-text1">上课学员人数</div>
                <div class="border-text2"><span style="color: red;">{{list.teacherCounts}}</span>人</div>
              </div>
              <div class="border-text">
                <div class="border-text1">上课老师人数</div>
                <div class="border-text2"><span style="color: red;">{{list.leaveCounts}}</span>人</div>
              </div>
            </div>
          </div>
        </div>
        <div class="header-left-buttom">
          <div class="zhe" id="min">
          </div>
        </div>
      </div>
      <div class="header-rigth">
        <div class="header-rigth-top">
          <div class="header-rigth-top-text"><span>事项提醒</span></div>
          <div class="header-rigth-top-text2">
            <div class="text">
              <span>续费</span>
            </div>
            <span class="ss">有0位同学剩余课时有0位同学剩余课时有0位同学剩余课时</span>
          </div>
        </div>
        <div class="header-rigth-buttom">
          <div class="headertext">
            <div class="hipp"><span>学员生日</span></div>

            <div class="name" v-for="item in birthday" :key="item.id">
              <div class="name-img">
                <img class="images" src="{{item.photo}}" alt="">
              </div>
              <div class="username">{{item.name}}</div>
              <div class="date">{{item.birthday}}</div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import * as echarts from 'echarts';
  export default {
    data() {
      return {
        list: [],
        birthday: [],
        // myChartlist:[],
      }
    },
    created() {
      this.nextlist(),
        this.birthdaylist()

    },
    mounted() {
      this.echartslist()
    },
    methods: {
      async echartslist() {
        let monthlist = []
        let countslist=[]
        let monthlist_do = []
        let countslist_do=[]
        let self = this
        const token = window.sessionStorage.getItem('access_token')

        // 学生总数
        const {
          data: res
        } = await this.$http.get('http://www.eshareedu.cn/edusystems/api/students/allcounts?year=2021', {
          headers: {
            token
          }
        })
        res.data.list.forEach(item => {
          monthlist.push(item.month)
          countslist.push(item.counts)
        })
        // 单月增加
        const {data:val} = await this.$http.get('http://www.eshareedu.cn/edusystems/api/students/monthcounts?year=2021',{headers:{token}})
        // console.log(val)
        val.data.list.forEach(item=>{
          monthlist_do.push(item.month)
          countslist_do.push(item.counts)
        })

        var myChart = echarts.init(document.getElementById('min'));
        //  console.log(myChart)
        // 指定图表的配置项和数据
       
        var option = {
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['学生总数', '单月增加']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: monthlist
          },
          yAxis: {
            type: 'value'
          },
          series: [{
              name: '学生总数',
              type: 'line',
              // stack: '总量',
              data:countslist
            },
            {
              name: '单月增加',
              type: 'line',
              // stack: '总量',
              data: countslist_do
            },
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },
      async nextlist() {
        let self = this
        const token = window.sessionStorage.getItem('access_token')
        // console.log(token)
        const {
          data: res
        } = await this.$http.get('http://www.eshareedu.cn/edusystems/api/students/todaycounts', {
          headers: {
            token
          }
        })
        // console.log(res)
        self.list = res.data.model
        // console.log(self.list)
      },
      async birthdaylist() {
        let self = this
        const token = window.sessionStorage.getItem('access_token')
        // console.log(token)
        const {
          data: res
        } = await this.$http.get('http://www.eshareedu.cn/edusystems/api/students/birthday', {
          headers: {
            token
          }
        })
        //  console.log(res)
        self.birthday = res.data.list
        //  console.log(self.birthday)
      },
    }
  }

</script>
<style scoped>
  .zhe{
    width: 100%;
    height: 100%;
  }
  .headertext {
    width: 95%;
    height: 95%;
    /* background-color: aqua; */
  }

  .hipp {
    display: flex;
  }

  .name {
    width: 100%;
    height: 13%;
    margin-top: 3%;
    background-color: #fff;
    border-bottom: 1px solid rgb(223, 223, 223);
    display: flex;
    align-items: center;
  }

  .name .name-img {
    width: 12%;
    height: 80%;
    border-radius: 3px;
    /* background-color: royalblue; */
  }

  .images {
    width: 100%;
    height: 100%;
    border-radius: 3px;
  }

  .username {
    width: 15%;
    font-size: 11px;
  }

  .date {
    width: 33%;
    margin-left: 40%;
    font-size: 11px;
  }

  .header-rigth-top-text {
    display: flex;
    width: 96%;
    height: 6%;
    margin-top: 2%;
    /* background-color: thistle; */
  }

  .header-rigth-top-text2 {
    width: 96%;
    height: 88%;
    margin-top: 2%;
    /* background-color: teal; */
  }

  .header-rigth-top-text2 .text {
    display: flex;
    font-size: 11px;
    width: 11%;
    height: 6%;
    background-color: rgb(160, 189, 241);
    color: rgb(52, 116, 235);
    font-size: 11px;

  }

  .ss {
    font-size: 11px;
  }

  .header {
    width: 100%;
    height: 570px;
    background-color: rgb(240, 240, 240);
    margin-top: 20px;
    display: flex;
    /* justify-content: space-between; */
  }

  .header-left {
    width: 82.5%;
    /* 1270 */
    height: 100%;
    /* background-color: cadetblue; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .header-left-top {
    width: 100%;
    height: 25%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header-left-buttom {
    width: 100%;
    height: 72.5%;
    background-color: #fff;


  }

  .header-rigth {
    width: 25%;
    /* background-color: red; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .header-rigth-top {
    width: 100%;
    height: 49%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;

  }

  .header-rigth-buttom {
    width: 100%;
    height: 49%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header-rigth {
    width: 260px;
    height: 100%;
    margin-left: 1%;
    /* background-color: chocolate; */
  }

  .header-do-top {
    width: 100%;
    height: 10%;
    /* background-color:violet; */
    display: flex;
  }

  .headerbo {
    width: 95%;
    height: 85%;
    /* background-color: teal; */
  }

  .border {
    width: 100%;
    height: 90%;
    /* border: 1px solid #999; */
    display: flex;
    align-items: center;
  }

  .border-text {
    width: 16.5%;
    height: 65%;
    border: 1px solid rgb(233, 233, 233);
  }

  .border-text1 {
    margin-top: 12%;
    font-size: 11px;
  }

  .border-text2 {
    margin-top: 3%;
  }

</style>
